import React, { Suspense } from 'react'
import logo from './logo.svg'
import './App.css'
import { Clock } from './examples/Clock'
import { Toggle } from './examples/Toggle'
import { LoginControl } from './examples/LoginControl'
import { NameForm } from './examples/NameForm'
import { Calculator } from './examples/Calculator'
import { OuterClickExample } from './examples/OuterClickExample'
import { ThemeContextExamles } from './examples/ThemeContextExamles'
// import { BlurExample } from './examples/BlurExample'
const BlurExample = React.lazy(() => import('./examples/BlurExample'))

function handleClick(e) {
	e.preventDefault()
	console.log('The link was clicked.')
}

function App() {
	return (
		<div className="App">
			<header className="App-header">
				<div className="App-content">
					<Clock />
					<Toggle />
					<LoginControl />
					<NameForm />
					<Calculator />
					<OuterClickExample />
					<Suspense fallback={<div>Loading...</div>}>
						<BlurExample />
					</Suspense>
					<ThemeContextExamles />
				</div>
				<img src={logo} className="App-logo" alt="logo" />
				<p>
					Edit <code>src/App.js</code> and save to reload.
				</p>
				<a
					onClick={handleClick}
					className="App-link"
					href="https://reactjs.org"
					target="_blank"
					rel="noopener noreferrer"
				>
					Learn React
				</a>
			</header>
		</div>
	)
}

export default App
